<script setup lang="ts">
import { queryList } from "@/api/point";
import { getToken } from "@/utils/auth";
import { stringTrimOfParams } from "@/utils/common";
import axios from "axios";
import { PxMessage } from "px-ui";
import { onMounted, ref } from "vue";
import { useRoute } from "vue-router";
import { PROCESS_STATUS } from "./const";
import Detail from "./detail.vue";

const queryParams = ref<any>({
  serialId: "",
  organization: "",
  processStatus: "",
  pageNum: 1,
  pageSize: 20
});
const selectOptions = ref<any[]>([]); //部门
const tableData = ref([]); // 表格数据
const total = ref(0); // 数据总数
const loading = ref(false); //表格数据接口请求是否完成
// 查询表格数据
const queryTable = async () => {
  loading.value = true;
  try {
    const res: any = await queryList(stringTrimOfParams(queryParams.value));
    tableData.value = res?.data || [];
    total.value = res?.total || 0;
  } catch (error) {}
  loading.value = false;
};
const formRef = ref(); // 筛选条件表单
// 重置筛选条件并查询
const resetTable = () => {
  formRef.value.resetFields();
  queryTable();
};

const page = ref("home"); // 当前显示page页面 home:列表页，detail:详情页
const id = ref(""); // 详情id
// 查看点位推荐详情
const handlePoints = (row: any) => {
  const { id: rowId } = row;
  page.value = "detail";
  id.value = rowId;
};
const route = useRoute();
// 初始化
const initData = async () => {
  // 1、路径中携带id参数则显示详情页
  const {
    query: { id }
  } = route;
  if (id) {
    page.value = "detail";
  }
  // 2、获取部门数据
  const res: any = await axios.get("/ifp/account/dept/listDeptMgmtTree?deptNameLike=&status=-1", {
    headers: {
      "Content-Type": "application/json",
      Authorization: "Bearer " + getToken().accessToken || "",
      facCode: localStorage.getItem("facCode") || ""
    }
  });
  if (res?.data?.code === 200) {
    selectOptions.value = res?.data?.data || [];
  } else if (res?.msg) {
    PxMessage.error(res.msg);
  }
  // 3、获取表单数据
  queryTable();
};
// 进入页面时触发
onMounted(() => {
  initData();
});
</script>
<template>
  <div>
    <!-- 列表 -->
    <div v-show="page === 'home'" class="custom-wrap-common">
      <px-form ref="formRef" class="custom-form-ui" :model="queryParams" label-position="right" label-width="120px">
        <px-row :gutter="16">
          <px-col :span="5"
            ><px-form-item prop="serialId" label="工单号">
              <px-input
                v-model="queryParams.serialId"
                placeholder="请输入工单号"
                clearable
                @blur="queryParams.serialId = $event.target.value.trim()"
                @keyup.enter="queryTable"
              >
                <template #suffix>
                  <px-icon style="cursor: pointer" @click="queryTable">
                    <search />
                  </px-icon>
                </template>
              </px-input>
            </px-form-item>
          </px-col>
          <px-col :span="5">
            <px-form-item label="部门" prop="organization">
              <px-tree-select
                v-model="queryParams.organization"
                clearable
                filterable
                check-strictly
                highlight-current
                node-key="deptId"
                :props="{ children: 'children', label: 'deptName', value: 'deptId' }"
                :data="selectOptions"
                :render-after-expand="false"
                placeholder="请选择部门"
              />
            </px-form-item>
          </px-col>
          <px-col :span="5">
            <px-form-item label="状态" prop="processStatus">
              <px-select v-model="queryParams.processStatus" placeholder="请选择状态" clearable filterable>
                <px-option v-for="(item, index) in PROCESS_STATUS" :key="index" :label="item.label" :value="item.value" />
              </px-select>
            </px-form-item>
          </px-col>
          <px-col :span="5">
            <px-button type="primary" @click="queryTable">查询</px-button>
            <px-button @click="resetTable">重置</px-button>
          </px-col>
        </px-row>
      </px-form>
      <px-table v-loading="loading" height="calc(100vh - 256px)" :data="tableData" class="custom-table">
        <px-table-column label="序号" min-width="50" align="center" fixed="left">
          <template #default="{ $index }">
            {{ (queryParams.pageNum - 1) * queryParams.pageSize + $index + 1 }}
          </template>
        </px-table-column>
        <px-table-column prop="serialId" label="工单号" min-width="200" fixed="left" show-overflow-tooltip />
        <px-table-column prop="createName" label="申请人" min-width="100" show-overflow-tooltip />
        <px-table-column prop="organizationName" label="部门" min-width="120" show-overflow-tooltip />
        <px-table-column prop="processStatus" label="审批状态" min-width="140">
          <template #default="scope">
            <px-button v-if="scope.row.processStatus === 'COMPLETED'" style="width: 64px; text-align: center" type="success">{{
              scope.row.processStatusCn
            }}</px-button>
            <px-button v-if="scope.row.processStatus === 'ONGOING'" style="width: 64px; text-align: center" type="primary">{{
              scope.row.processStatusCn
            }}</px-button>
            <px-button v-if="scope.row.processStatus === 'TERMINATED'" style="width: 64px; text-align: center" type="info">{{
              scope.row.processStatusCn
            }}</px-button>
            <px-button v-if="scope.row.processStatus === 'EXCEPTION'" style="width: 64px; text-align: center" type="danger">{{
              scope.row.processStatusCn
            }}</px-button>
          </template>
        </px-table-column>
        <px-table-column prop="action" label="操作" min-width="60">
          <template #default="scope">
            <px-tooltip content="点位推荐" placement="top">
              <px-button v-has="'MY_POINTS'" link type="primary" icon="LocationPx" @click="handlePoints(scope.row)" />
            </px-tooltip>
          </template>
        </px-table-column>
      </px-table>
      <pagination
        v-show="total > 0"
        class="equip-table-pagination"
        v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize"
        :total="total"
        @pagination="queryTable"
      />
    </div>
    <!-- 详情 -->
    <Detail v-if="page === 'detail'" :id="id" v-model:page="page" />
  </div>
</template>
<style lang="scss" scoped>
@import url("@/style/table.scss");
@import url("@/style/form.scss");

.custom-wrap-common {
  width: 100%;
  height: calc(100vh - 126px);
  padding: 24px;
  background-color: #fff;
  border-radius: 8px;

  :deep(.px-form-item) {
    width: 100%;
    margin-bottom: 8px;

    .px-input {
      width: 100%;
    }

    .px-select {
      width: 100%;
    }

    .px-select-v2 {
      width: 100%;
    }
  }
  .equip-table-pagination {
    width: 100%;
    margin: 0;
    height: 64px;
    padding: 16px 0 !important;
    box-sizing: border-box;
    :deep(.px-pagination) {
      right: 0;
    }
  }
}
</style>
